<template>
  <div>
    <div v-if="empty">
      <ElButton size="small" type="success"
        :disabled="recording" @click="record">
        {{ recording ? '录制中...' : '录制' }}
      </ElButton>
    </div>
    <div v-else flex items-center>
      <CommonColorBlock :color="modelValue" mr2/>
      <ElButton size="small" type="warning":disabled="recording" @click="record">
        {{ recording ? '录制中...' : '重新录制' }}
      </ElButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { tMousePosition } from '~/models/pyBundles/bunKeyMouse';
import type { InterfaceType } from '~/models/types/interface_type';
import type { DataType } from '~/models/types/type';
import { defaultTaskManager } from '~/models/Task/TaskManager';

interface _Color {
  r: number,
  g: number,
  b: number
}

const props = defineProps<{
  type: DataType,
  modelValue: _Color
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', event: _Color): void,
}>()

const t = computed(() => props.type as InterfaceType)

const empty = computed(() => {
  return props.modelValue.r === 0 && props.modelValue.g === 0 && props.modelValue.b === 0
})

const recording = ref(false)
async function record() {
  recording.value = true
  const code = await loadCode('屏幕拾色')
  const color = await defaultTaskManager.value.execForData(code)
  
  if (props.type.receiveValue(color)) {
    emit('update:modelValue', color)
  }
  else {
    console.log('后端返回异常', color)
  }
  recording.value = false
}
</script>

<style lang="scss">
.var-input-bool {
  .el-checkbox__input {
    background: #fff;
    overflow: hidden;
    border-radius: 2px;
  }
}


</style>